import { Button, Card, Result } from 'antd';
import React from 'react';
import ProcessDetail from './ProcessDetail';
import styles from './index.less';
import ImportExportManager from '../ImportExportManager';
import useModal from '@/hooks/UseModal';
import IconLink from '@/components/IconLink';
import ProcessList from './ProcessList';

function RightContent({ height, processId, catalogId }) {
  const showProcessDetailPage = !!processId;
  const showProcessListPage = !!catalogId;
  const { showModal, hideModal, visible } = useModal();

  let content = (
    <div className={styles.vertical_center}>
      <Result status="404" subTitle="暂无流程数据" />
    </div>
  );

  if (showProcessDetailPage) {
    content = <ProcessDetail processId={processId} />;
  }

  if (showProcessListPage) {
    content = <ProcessList catalogId={catalogId} />;
  }

  return (
    <Card
      className="cute"
      style={{ height }}
      bodyStyle={{ padding: '16px' }}
      title="流程管理"
      extra={
        <Button type="primary" icon="cloud-upload" onClick={showModal}>
          配置导入
        </Button>
      }
    >
      {content}
      <ImportExportManager width={1200} visible={visible} onCancel={hideModal} />
    </Card>
  );
}

export default RightContent;
